<!--  -->
<template>
  <div>
    <!-- <input type="file" name='file' @change.prevent="handleFileChange"/> -->
    <validate-form @form-submit="onFormSubmit">
      <div class="mb-3">
        <span>文章标题</span>
        <validate-input :rules="titleRules" v-model="titleVal" placeholder="请输入文章标题" type="text">
        </validate-input>
      </div>
      <div class="mb-3">
        <span>文章详情：</span>
        <validate-input :rules="contentRules" v-model="contentVal" placeholder="请输入文章详情" type="text" tag="textarea"
          rows="10">
        </validate-input>
      </div>
      <template v-slot:submit>
        <span class="btn btn-danger" @click.prevent="submit">Submit</span>
      </template>
    </validate-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import ValidateForm from '@/components/ValidateForm.vue'
import ValidateInput, { RulesProp } from '@/components/ValidateInput.vue'
import { GlobalDataProps } from '../store/index'
import { PostProps } from '../hooks/testData'
import { nanoid } from "nanoid"
import axios from 'axios'
export default {
  name: "PostPage",
  setup() {
    const store = useStore<GlobalDataProps>()
    const router = useRouter()
    const titleVal = ref('')
    const contentVal = ref('')
    const titleRules: RulesProp = [
      { type: 'required', message: '标题不能为空' }
    ]
    const contentRules: RulesProp = [
      { type: 'required', message: '内容不能为空' }
    ]
    const onFormSubmit = (result: boolean) => {
      console.log(result)
      if (result) {
        const { columnId } = store.state.user
        if (columnId) {
          const newPost: PostProps = {
            _id: nanoid(),
            title: titleVal.value,
            description: contentVal.value,
            columnId: '1',
            createdAt: new Date().toLocaleString()
          }
          store.commit('createPost', newPost)
          router.push({ name: 'column', params: { id: columnId } })
        }
      }
    }
    const handleFileChange = (e: Event) => {
      const target = e.target as HTMLInputElement
      const files = target.files
      if (files) {
        const uploadedFile = files[0]
        const formData = new FormData()
        formData.append(uploadedFile.name, uploadedFile)
        axios.post('http://api.vikingship.xyz/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then((resp) => {
          console.log(resp)
        })
      }
    }
    const submit = () => {
      let data = {
        title: titleVal.value,
        content: contentVal.value,
        image: 'https://dn-st.teambition.net/teambition/images/logo1.a6464e9c.jpg',
        column: store.state.user.columnId || '5f3e86d62c56ee13bb83096c',
        author: store.state.user.name
      }
      store.dispatch('newPost', data)
    }
    return {
      titleRules,
      contentRules,
      titleVal,
      contentVal,
      onFormSubmit,
      handleFileChange,
      submit
    }
  },
  components: { ValidateForm, ValidateInput }
}
</script>

<style  scoped lang='less'>
</style>
